<template>
  <el-table
      :data="data"
      border
      :span-method="handleSpanMethod">
    <slot name="left"/>
    <el-table-column
        header-align="center"
        v-for="(item,index) in columns"
        :key="item"
        :label="item">
      <template v-if="index === 0" v-slot="{ row }">
        <div style="height:22px;width: 100px;background-color: greenyellow;">{{ row.id }}</div>
      </template>
    </el-table-column>
    <slot name="right"/>
  </el-table>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({})
export default class Gant extends Vue {
  @Prop({ default: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'] }) columns: string[] | undefined;

  data = [
    { id: 1, startTime: '2024-04-01 00:00:00', endTime: '2024-04-01 04:00:00' },
    { id: 2, startTime: '2024-04-01 02:00:00', endTime: '2024-04-01 06:00:00' },
    { id: 3, startTime: '2024-04-01 04:00:00', endTime: '2024-04-01 08:00:00' },
    { id: 4, startTime: '2024-04-01 06:00:00', endTime: '2024-04-01 10:00:00' },
    { id: 5, startTime: '2024-04-01 08:00:00', endTime: '2024-04-01 12:00:00' },
    { id: 6, startTime: '2024-04-01 10:00:00', endTime: '2024-04-01 14:00:00' },
    { id: 7, startTime: '2024-04-01 12:00:00', endTime: '2024-04-01 16:00:00' },
    { id: 8, startTime: '2024-04-01 14:00:00', endTime: '2024-04-01 18:00:00' },
    { id: 9, startTime: '2024-04-01 16:00:00', endTime: '2024-04-01 20:00:00' },
    { id: 10, startTime: ' 2024-04-01 18:00:00', endTime: '2024-04-01 22:00:00' }
  ];

  handleSpanMethod ({ columnIndex }: { columnIndex: number }) {
    if (columnIndex === 0) {
      return { rowspan: 1, colspan: 9 }
    }
  }
}
</script>
